/**
 * 我的中间菜单
 */
import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, TouchableOpacity, Animated} from  'react-native';
let order1 = require('../../img/order1.png');
let order2 = require('../../img/order2.png');
let order3 = require('../../img/order3.png');
let order4 = require('../../img/order4.png');

let wallet = require('../../img/compilation/wallet.png');
let telemarketer = require('../../img/compilation/telemarketer.png');
let shopping = require('../../img/compilation/shopping-cart.png');
let scooter = require('../../img/compilation/scooter.png');
let shop = require('../../img/compilation/shop.png');
let purse = require('../../img/compilation/purse.png');
export default class MineMiddleView extends Component {
    constructor(props){
        super(props);
        this.state={
            anim:new Animated.Value(0)
        }
    }
    componentDidMount(){
        Animated.spring(this.state.anim,{
            toValue:0,
            velocity:7,
            tension:-20,
            friction:3,
        }).start();
    }
    render() {
        return (
            <Animated.View style={[styles.container,{
                transform:[
                    {
                        scale:this.state.anim.interpolate({
                            inputRange:[0,1],
                            outputRange:[1,3]
                        })
                    },
                    {
                        translateX:this.state.anim.interpolate({
                            inputRange:[0,1],
                            outputRange:[1,300]
                        })
                    },
                    {
                        rotate:this.state.anim.interpolate({
                            inputRange:[0,1],
                            outputRange:['0deg','720deg']
                        })
                    }
                ]
            }]}>
                <InnerView title="待付款" image={wallet}/>
                <InnerView title="待接单" image={telemarketer}/>
                <InnerView title='待发货' image={shopping}/>
                <InnerView title='已发货' image={scooter}/>
                <InnerView title='已完成' image={shop}/>
            </Animated.View>
        )
    }
}

class InnerView extends Component {
    render() {
        return (
            <TouchableOpacity onPress={()=>{alert("asd")}}>
                <View style={styles.innerViewStyle}>
                    <Image source={this.props.image} style={{width:30,height:20,resizeMode:'contain'}}/>
                    <Text>{this.props.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}
InnerView.propTypes = {
    title: React.PropTypes.string,
    image: React.PropTypes.number
};
InnerView.defaultProps = {
    title: '',
    image: null
};
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
        justifyContent: 'space-around'
    },
    innerViewStyle: {
        width: 70,
        height: 70,

        // 水平和垂直居中
        justifyContent: 'center',
        alignItems: 'center'
    }
});
